<template>
  <div class="container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="fixed-tabs">
      <el-tab-pane label="基本信息" name="basic"></el-tab-pane>
      <el-tab-pane label="售卖信息" name="sell"></el-tab-pane>
      <el-tab-pane label="商品详情" name="details"></el-tab-pane>
      <el-tab-pane label="高级设置" name="settings"></el-tab-pane>
    </el-tabs>
    <div ref="sections">
      <div id="basic" class="section">
        <base-form ref="baseform" :formData="productinfo" />
      </div>
      <div id="sell" class="section">
        <buyInfo ref="buyinfo" :formData="saleinfo" />
      </div>
      <div id="details" class="section">
        <goodsinfo ref="goodinfo" :formData="detail" />
      </div>
      <div id="settings" class="section">
        <settings ref="setting" :formData="setting" />
      </div>
    </div>
    <div class="submit-box">
      <el-button type="primary" plain @click="submitForm">取消</el-button>
      <el-button type="warning">确认发布商品</el-button>
    </div>
  </div>
</template>

<script>
import BaseForm from "./components/BaseForm.vue";
import BuyInfo from "./components/buyInfo.vue";
import goodsinfo from "./components/goodsinfo.vue";
import settings from "./components/setting.vue";

export default {
  components: {
    BaseForm,
    BuyInfo,
    goodsinfo,
    settings,
  },
  data() {
    return {
      activeTab: "basic",
      productForm: {
        // storeId: '',
        // app_spu_code: '', // 商品id
        // name: '', // 商品名称
        // category_name: '',
        // is_sold_out: '',
        // sale_type: '',
        // available_times: '',
        // min_order_count: '',
        // sequence: '',
        // is_single_no_delivery: ''
        productinfo: {
          name: "", // 名称
          tag_id: "", // 分类id
          category_name: "", // 门店分类
          picture: "", // 商品图片
        },
        saleinfo: {
          skus: [
            {
              sku_id: "", // 店内码货号
              spec: "", // 规格名称
              price: "", // 价格
              stock: "", // 库存
              upc: "", // 条形码
              location_code: "", // 货码位置
              weight: "", // 重量
              weight_for_unit: "", // 重量单位
            },
          ], // 商品属性
        },
        detail: {
          common_attr_value: [
            {
              attrId: "", // 普通属性
              attrName: "", // 普通属性名称
              emptyOrNot: "",
              valueList: [
                {
                  valueId: "", // 普通属性值
                  value: "", // 普通属性值名称
                },
              ],
            },
          ],
          sell_point: "", // 商品卖点
          sell_point_available_times: {
            start_time: "", // 商品卖点生效时间
            end_time,
          },
          description: "", // 商品描述
          picture_contents: "", // 商品详情图片
        }, // 商品详情
        setting: {
          sale_type: 1, // 1-现货直发，2-预售，不填默认为1
          appoint_available_times: "", // 预售生效时间
          delivery_time: "", // 配送开始时间
          delivery_end_time: "", // 配送结束时间
          available_times: "", // 周期性时间
          all_available_times: "", // 全时段可售
          is_specialty: "", // 是否力荐
          properties: [
            {
              property_name: "", // 属性名称
              values: [], //属性值
            },
          ], // 商品属性
        },
      },
    };
  },
  mounted() {
    this.createObserver();
  },
  methods: {
    handleTabClick(tab) {
      // 点击 tab 时跳转到对应模块
      document.getElementById(tab.name).scrollIntoView({ behavior: "smooth" });
    },
    createObserver() {
      const options = {
        root: null,
        rootMargin: "0px",
        threshold: 0.5,
      };

      const callback = (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            this.activeTab = entry.target.id;
          }
        });
      };
      const observer = new IntersectionObserver(callback, options);
      const sections = this.$refs.sections.children;
      Array.from(sections).forEach((section) => {
        observer.observe(section);
      });
    },
  },
};
</script>

<style lang="scss" scope>
.container {
  position: relative;
  min-height: 1000px;
}
.fixed-tabs {
  position: sticky;
  width: 100%;
  top: 20px;
  /* left: 0; */
  /* right: 0; */
  z-index: 999;
  background-color: #fff;
}
.section {
  height: 400px;
  margin-bottom: 20px;
}
.submit-box {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
}
</style>
